<template>
	<el-form :inline="true" :model="formData" class="demo-form-inline">
		<el-form-item>
			<el-input v-model="formData.name" placeholder="请输入权限名" />
		</el-form-item>
		<el-form-item>
			<el-input v-model="formData.description" placeholder="请输入描述" />
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="onQuery">查询</el-button>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="edit">新增权限</el-button>
		</el-form-item>
	</el-form>
	<el-table :data="tableData" style="width: 100%">
		<el-table-column fixed prop="id" label="ID" width="120" />
		<el-table-column prop="name" label="权限名称" width="400" />
		<el-table-column prop="description" label="权限描述" width="200" />

		<el-table-column fixed="right" label="操作">
			<template #default="scope">
				<el-button type="primary" size="small" @click="edit(scope.row)"
					>编辑</el-button
				>
			</template>
		</el-table-column>
	</el-table>
	<br />
	<Pagex @on-change="callPermissionApi" v-model="pageData"></Pagex>

	<el-dialog v-model="show" title="编辑" width="35%">
		<el-form label-position="left">
			<el-form-item label="权限名称">
				<el-input v-model="permissionsInfo.name" />
			</el-form-item>
			<el-form-item label="权限描述">
				<el-input v-model="permissionsInfo.description" />
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button
					v-if="permissionsInfo.id"
					@click="deleteRole"
					type="danger"
					>删除</el-button
				>
				<el-button
					v-if="permissionsInfo.id"
					type="primary"
					@click="updateRole"
				>
					更新
				</el-button>
				<el-button
					v-if="!permissionsInfo.id"
					type="success"
					@click="insertRole"
				>
					添加
				</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
	import { permissionApi } from '@/api';
	import { ref, onMounted, reactive } from 'vue';
	import { ElMessage } from 'element-plus';
	const tableData = ref([]);
	const show = ref(false);
	const permissionsInfo = reactive({
		id: undefined,
		name: '',
		description: '',
	});
	const formData = reactive({
		name: '',
		description: '',
	});
	const pageData = reactive({
		total: 0,
		pageSize: 5,
		pageNum: 1,
	});

	const edit = (row: any) => {
		if (row) {
			permissionsInfo.id = row.id;
			permissionsInfo.name = row.name;
			permissionsInfo.description = row.description;
		} else {
			permissionsInfo.id = undefined;
			permissionsInfo.name = '';
			permissionsInfo.description = '';
		}
		show.value = true;
	};

	onMounted(() => {
		callPermissionApi();
	});

	const callPermissionApi = () => {
		let pageNum = pageData.pageNum;
		let pageSize = pageData.pageSize;
		permissionApi.select
			.call({
				...formData,
				pageNum,
				pageSize,
			})
			.then((res: any) => {
				pageData.total = res.total;
				tableData.value = res.items;
			});
	};

	const onQuery = () => {
		callPermissionApi();
	};

	const insertRole = () => {
		permissionApi.insert.call(permissionsInfo).then(() => {
			after();
		});
	};
	const deleteRole = () => {
		permissionApi.delete.call({ id: permissionsInfo.id }).then(() => {
			after();
		});
	};
	const updateRole = () => {
		permissionApi.update.call(permissionsInfo).then(() => {
			after();
		});
	};

	const after = () => {
		show.value = false;
		callPermissionApi();
		ElMessage.success('操作成功');
	};
</script>